<template>
	<u-navbar :title="props.storageTypeCode+props.storageSectionCode" bgColor="#FBFBFF" :autoBack="true"
		:style="{ paddingTop: safeAreaInsets?.top + 'px' }">
		<template #right>
			<view class="navbar-submit" @click="submit">
				<text>提交</text>
			</view>
		</template>
	</u-navbar>
	<view class="baseForm">
		<u--form labelPosition="left" :model="umodel" :rules="rules" ref="uForm" labelWidth="160rpx" errorType="toast">

			<u-form-item label="包装条码">
				<u--input :focus="barcode1Focused" v-model="umodel.extenalCode" placeholder="包装条码" clearable
					prefixIcon="scan" prefixIconStyle="font-size: 22px;color: #909399"
					@confirm="barcode1Enter"></u--input>
			</u-form-item>
			<u-form-item label="货位码">
				<u--input :focus="barcode2Focused" ref="binInput" v-model="umodel.binCode" placeholder="货位码" clearable
					prefixIcon="scan" prefixIconStyle="font-size: 22px;color: #909399"
					@confirm="barcode2Enter"
					></u--input>
			</u-form-item>
			<u-form-item label="存货编码" prop="name">
				<u--input disabled="true" v-model="umodel.materialName" placeholder="存货编码" clearable></u--input>
			</u-form-item>

			<u-picker :show="show" :columns="columns" title="请选择" keyName="binCode" immediateChange cancel-text="取 消"  @cancel="show = false" @confirm="typeSelect"  ></u-picker>
	
		</u--form>
		<!-- 搜索信息 -->
		<view class="search">
			<u-button text="重置" class="custom-style" @click="clear"></u-button>
			<u-button type="primary" text="添加" class="custom-style" :loading="addLoading" @click="addList"></u-button>
		</view>
		<u-line></u-line>
		<!-- 卡片显示 -->
		<view v-if="scanList.length" class="list">
			<text class="list-title">数据列表({{ scanList.length }})</text>
			<view class="card" v-for="item in scanList" :key="item.code">
				<view class="right">
					<view class="title">包装条码：{{ item.extenalCode }}</view>
					<view class="body">
					仓位号：{{ item.binCode }}
					</view>
				</view>
				<view class="left">
					<view class="number">
						{{ item.totalQuantity }}
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
	</view>
	<u-back-top :scroll-top="scrollTop" top="200" mode="squery"></u-back-top>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue';   
	import { onPageScroll, onReachBottom, onShow } from '@dcloudio/uni-app';
	import ScanBar from '@/components/scan-bar/index.vue';
	import { http } from '@/utils/http';
	import { PageResult } from '@/types/type';
	import { computed } from 'vue';
	
	const props = defineProps({
		id: {
			type: String,
			default: '',
		},
		storageTypeCode: {
			type: String,
			default: '盘点',
		},
		storageSectionCode: {
			type: String,
			default: '盘点',
		},
		

	});

	// 获取安全距离高度
	const { safeAreaInsets } = uni.getSystemInfoSync();

	// 监听页面到顶部距离
	const scrollTop = ref(0)
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop
	})

	// 表单数据定义
	const umodel = reactive({
		storageUnitCode: '',
		storageUnitId: '',
		binCode: '',
		binId: '',
		materialName: '',
		storageTypeCode: '',
		number: 1,
		materialCode: '',
		inventoryTaskId: props.id,
		  bins: [],
		  organizationId: '',
		  organizationCode: '',
		  organizationName: '',
		  warehouseId: '',
		  warehouseCode: '',
		  warehouseName: '',
		  plantId: '',
		  plantCode: '',
		  plantName: '',
		  storageSectionId: '',
		  storageSectionCode: '',
		  extenalCode: '',
	});


	let barcode1Focused = ref(true);
	let barcode2Focused = ref(false);

// const text = ref('sdfvdfv');
const selectionStart = ref(0);
const selectionEnd = computed(()=> 30);

const columns = ref([]);
const show = ref(false);

onShow(()=>{
	$hideKeyboard();
})

function reset () {
	umodel.binCode="";
	umodel.binId="";
	umodel.materialCode="";
	umodel.materialName="";
	umodel.storageTypeCode="";
	umodel.storageUnitCode="";
	umodel.storageUnitId="";
	columns.value=[];
	umodel.organizationId="";
	umodel.organizationCode="";
	umodel.organizationName="";
	umodel.warehouseId="";
	umodel.warehouseCode="";
	umodel.warehouseName="";
	umodel.plantId="";
	umodel.plantCode="";
	umodel.plantName="";
	umodel.storageSectionId="";
	umodel.storageSectionCode="";
	umodel.extenalCode="";
	barcodeFocused1(false);
	
}

function clear () {
	umodel.binCode="";
	umodel.binId="";
	umodel.materialCode="";
	umodel.materialName="";
	umodel.storageUnitCode="";
	umodel.storageUnitId="";
	umodel.storageTypeCode="";
	umodel.organizationId="";
	umodel.organizationCode="";
	umodel.organizationName="";
	umodel.warehouseId="";
	umodel.warehouseCode="";
	umodel.warehouseName="";
	umodel.plantId="";
	umodel.plantCode="";
	umodel.plantName="";
	umodel.storageSectionId="";
	umodel.storageSectionCode="";
	umodel.extenalCode="";
	columns.value=[];
	
	scanList.value=[];
	
	barcodeFocused1(false);
}

function typeSelect(e) {
	if (e.value.length) {
		umodel.binCode = e.value[0].binCode;
		umodel.binId = e.value[0].id;
		console.log(umodel.binId);
	}
	show.value = false
}
	function barcodeFocused1(selectedAll : boolean) {
		barcode1Focused.value = false;
		// $hideKeyboard();	
		setTimeout(() => {
			barcode1Focused.value = true;
		}, 200)
	}

	const binInput = ref();
	//条码回车
	async function barcode1Enter(resultone : any) {
				const result : PageResult<any> = await http({
					method: 'GET',
					url: '/wms/storageunit/getin/' + resultone,
					data: {}
				})
				umodel.storageUnitId = result.data.id;
				umodel.extenalCode= result.data.extenalCode;
				umodel.storageUnitCode=result.data.storageUnitCode;
				umodel.materialCode = result.data.materialCode;
				umodel.materialName = result.data.materialName;
				umodel.plantId=result.data.plantId;
				umodel.plantCode=result.data.plantCode;
				umodel.plantName=result.data.plantName;
				$hideKeyboard();
	}

	//货位回车
	async function barcode2Enter(result : any) {
			const data = await http({
				url: '/wms/bin/getBinByCode/' + result,
				method: 'GET',
				data: {}
			})
				umodel.binCode = data.data.binCode;
				umodel.binId = data.data.id;
				umodel.storageTypeCode = data.data.storageTypeCode;
				umodel.organizationId= data.data.organizationId;
				umodel.organizationCode= data.data.organizationCode;
				umodel.organizationName= data.data.organizationName;
				umodel.warehouseId= data.data.warehouseId;
				umodel.warehouseCode= data.data.warehouseCode;
				umodel.warehouseName= data.data.warehouseName;
				umodel.storageSectionId=data.data.storageSectionId;
				umodel.storageSectionCode=data.data.storageSectionCode;
				$hideKeyboard();
		}
	const addLoading = ref(false);

	function addList() {
		if (umodel.storageTypeCode==props.storageTypeCode&&umodel.extenalCode) {
			uForm.value.validate().then((res) => {
				addLoading.value = true;
				// 模拟添加数据操作
				setTimeout(() => {
					const obj = JSON.parse(JSON.stringify(umodel))
					scanList.value.push(obj)
					addLoading.value = false;
					uni.showToast({
						title: '添加成功',
					})
					reset()
				}, 1000)
			});
			
		} else {
			uni.showToast({
				title: '请扫描包装条码并扫描存储类型'+props.storageTypeCode+'下的货位',
				icon: 'none'
			})
		}
	}

	// 表单规则定义
	const rules = ref({
		binId: [
			{
				type: 'string',
				required: true,
				message: '请填写物料名称',
				trigger: ['change']
			},
			{
				type: 'string',
				max: 40,
				message: '物料名称不超过40个字符',
				trigger: ['change']
			}
		],
		storageUnitId: {
			type: 'number',
			required: true,
			max: 20,
			message: '数量不能为空',
			trigger: ['change']
		}
	});

	// 定义列表数据
	const scanList = ref([
	])

	// 重置表单
	const uForm = ref();

	const scanBarRef1 = ref();




	// 表单提交
	const submitLoading = ref(false);
	async function submit() {
		if (submitLoading.value === false) {
			submitLoading.value = true;
			uni.showLoading({
				title: '提交中···'
			})


			const result : PageResult<any> = await http({
				method: 'POST',
				url: '/wms/wmsinventorycollection/commit',
				// data: {
				// 	id: props.id,
				// 	appDetails:scanList

				// }
				data:  scanList.value 
			})
			const list = result.data;

			// 模拟提交成功操作
			setTimeout(() => {
				uni.hideLoading();
				$hideKeyboard();
				submitLoading.value = false;
				uni.showToast({
					title: '已成功'
				})
			}, 1000);
			clear();
		}
	}


	// 关闭软键盘,防冻
	function $hideKeyboard() {
		const interval = setInterval(function () {
			uni.hideKeyboard(); //隐藏软键盘
		}, 10);
		setTimeout(() => {
			clearInterval(interval);
			console.log('停止刷新')
		}, 2000);
	}
	
	
	
	
</script>

<style lang="scss" scoped>
	.baseForm {
		padding: $uni-page-padding;
		padding-bottom: 30px;
		margin: 50px 0 0 0;

		.u-form {
			margin-top: 5px;

			:deep(.u-form-item__body) {
				padding: 5px 0;
			}

			.u-input {
				border: 1px solid $uni-input-border-color;
			}

			.scan-bar {
				display: flex;
				flex: 1;
			}
		}

		.u-line {
			padding: 10px 0;
		}

		.search {
			display: flex;

			.custom-style {
				// width: 120px;
				margin: 10px 5px 5px;
				height: 36px;
				border-radius: 8px;

				&:nth-child(1) {
					flex: 1
				}

				&:nth-child(2) {
					flex: 3
				}
			}
		}

		.list {
			.list-title {
				line-height: 40px;
				font-size: 14px;
				color: rgba(0, 0, 0, 0.4);
			}

			.card {
				margin-top: 5px;
				margin-bottom: 10px;
				border-radius: 7px;
				display: flex;
				align-items: center;
				padding: 10px 0;
				transition: all 300ms ease;
				box-shadow: 0 0 1px rgba(0, 0, 0, 0.1);

				.left {
					// flex-basis: 90rpx;
					padding-right: 10px;
					text-align: right;
					font-size: 13px;

					.enter {
						line-height: 20px;
						margin-bottom: 5px;
					}

					.number {
						font-size: 13px;
						line-height: 18px;
					}

					:deep(.u-icon--right) {
						flex-direction: row-reverse;
					}
				}

				.right {
					flex: 1;
					padding-left: 15px;

					.title {
						font-size: 15px;
						line-height: 20px;
						margin-bottom: 5px;
					}

					.body {
						color: rgba(0, 0, 0, 0.4);
						font-size: 13px;
						line-height: 18px;
					}
				}
			}
		}
	}
</style>